<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue-指令：英雄列表</title>
  <style>
    body {
      font-family: sans-serif;
    }

    #container {
      max-width: 900px;
      margin: 30px auto;
    }

    .search-form {
      margin-bottom: 20px;
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .search-form input,
    .search-form select {
      flex: 1;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 16px;
    }

    .search-form button {
      padding: 10px 20px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }

    .search-form button.clear {
      background-color: #6c757d;
    }

    .table {
      width: 100%;
      border-collapse: collapse;
    }

    .table th,
    .table td {
      border: 1px solid #e0e0e0;
      padding: 15px;
      text-align: center;
      vertical-align: middle;
    }

    .avatar {
      width: 60px;
      height: 60px;
      object-fit: cover;
      border-radius: 50%;
    }
  </style>
  <script type="importmap">
    {
        "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        }
    }
  </script>
</head>

<body>

<div id="container">
  <h1>超级英雄名册</h1>

  <form class="search-form">
    <input type="text" placeholder="英雄名..." v-model="searchQuery.name" />

    <select v-model="searchQuery.publisher">
      <option value="">所有阵营</option>
      <option value="Marvel">漫威</option>
      <option value="DC">DC</option>
    </select>
    <button type="button" @click="search">筛选</button>
    <button type="button" @click="clear" class="clear">重置</button>
  </form>

  <table class="table">
    <thead>
    <tr>
      <th>英雄名</th>
      <th>头像</th>
      <th>真名</th>
      <th>阵营</th>
      <th>首次登场</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="hero in heroList" :key="hero.id">
      <td>{{ hero.name }}</td>
      <td><img :src="hero.image" class="avatar"></td>
      <td>{{ hero.alias }}</td>
      <td>
        <span v-if="hero.publisher === 'Marvel'">漫威</span>
        <span v-else-if="hero.publisher === 'DC'">DC</span>
        <span v-else>独立</span>
      </td>
      <td>{{ hero.firstAppearance }}</td>
    </tr>
    </tbody>
  </table>
</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {

      return {
        searchQuery: {
          name: '',
          publisher: ''
        },
        heroList: [
          { id: 101, name: '钢铁侠', alias: '托尼·斯塔克', image: 'https://s2.loli.net/2025/06/18/pCZq31ouRv6IMYb.png', publisher: 'Marvel', firstAppearance: 'Tales of Suspense #39 (1963)' },
          { id: 102, name: '超人', alias: '克拉克·肯特', image: 'https://s2.loli.net/2025/06/18/mrKD6j5q1oeLawS.png', publisher: 'DC', firstAppearance: 'Action Comics #1 (1938)' },
          { id: 103, name: '蜘蛛侠', alias: '彼得·帕克', image: 'https://s2.loli.net/2025/06/18/rNecjDA1Igubfpw.png', publisher: 'Marvel', firstAppearance: 'Amazing Fantasy #15 (1962)' }
        ]
      }
    },
    methods: {
      search() {
        alert(`开始筛选: 英雄名=${this.searchQuery.name}, 阵营=${this.searchQuery.publisher}`);
      },
      clear() {
        this.searchQuery.name = '';
        this.searchQuery.publisher = '';
      }
    }
  }).mount('#container')
</script>
</body>

</html>
